<!--
 * 开发工具头部组件
 * 用于页面右上角显示开发相关的工具按钮
 * 包含：开发说明、Mock数据模式切换
 -->

<template>
  <div class="dev-tools-container" v-show="visible && showDevTools">
    <a-space :size="12">
      <a-tooltip title="开发说明">
        <a-button type="default" @click="handleShowDevInfo">
          🛠️
        </a-button>
      </a-tooltip>
      <a-tooltip :title="mockDataMode ? '当前使用Mock数据模式' : '当前使用数据库数据模式'">
        <a-button
          type="default"
          :class="mockDataMode ? 'data-mode-mock' : 'data-mode-db'"
        >
          {{ mockDataMode ? '📝 Mock数据' : '🗄️ 数据库' }}
        </a-button>
      </a-tooltip>
    </a-space>
  </div>
</template>

<style scoped>
/* 开发工具容器样式 */
.dev-tools-container {
  display: flex;
  align-items: center;
}

/* 数据模式按钮样式优化 */
.data-mode-mock {
  border-color: #ff7a00 !important;
  color: #ff7a00 !important;
  background-color: #fff7e6 !important;
}

.data-mode-mock:hover {
  border-color: #ff7a00 !important;
  color: #ff7a00 !important;
  background-color: #ffefde !important;
}

.data-mode-db {
  border-color: #52c41a !important;
  color: #52c41a !important;
  background-color: #f6ffed !important;
}

.data-mode-db:hover {
  border-color: #52c41a !important;
  color: #52c41a !important;
  background-color: #eefdde !important;
}
</style>

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
  /** 是否启用Mock数据模式 */
  mockDataMode?: boolean;
  /** 是否显示开发工具栏 */
  visible?: boolean;
}

interface Emits {
  /** 点击开发说明按钮时触发 */
  (e: 'showDevInfo'): void;
}

const props = withDefaults(defineProps<Props>(), {
  mockDataMode: true,
  visible: true
});

const showDevTools = ref(false);

const emit = defineEmits<Emits>();

// 处理显示开发说明
function handleShowDevInfo() {
  emit('showDevInfo');
}
</script>